
<template>
  <!-- 次组件用来筛选图书的条件，如综合排序，价格排序，价格范围 -->
  <div>
    <el-menu
      :default-active="activeIndex"
      class="el-menu-demo"
      mode="horizontal"
      @select="handleSelect"
    >
      <el-menu-item index="1">综合排序</el-menu-item>
      <el-menu-item index="2">销量</el-menu-item>
      <el-submenu index="3">
        <template slot="title">{{ priceTitle }}</template>
        <el-menu-item index="3-1">价格从低到高</el-menu-item>
        <el-menu-item index="3-2">价格从高到低</el-menu-item>
      </el-submenu>
      <el-menu-item index="4">
        <div class="price-div">
          <el-row>
            <el-col :span="11">
              <el-input
                v-model.number="from"
                size="mini"
                prefix-icon="iconfont icon-qian"
                type="number"
                min="0"
              />
            </el-col>
            <el-col class="line" :span="2">-</el-col>
            <el-col :span="11">
              <el-input
                v-model.number="to"
                size="mini"
                prefix-icon="iconfont icon-qian"
                type="number"
                min="0"
              />
            </el-col>
            <el-button size="mini" @click="handleBookPriceSection">确定</el-button>
          </el-row>
        </div>
      </el-menu-item>
    </el-menu>
  </div>
</template>
<script>
import '@/style/iconfront.css'
// import { initBookPageFormAndSearchBookForm } from '@/common/common'
export default {
  data() {
    return {
      // activeIndex: '1',
      // activeIndex2: '1',
      priceTitle: '价格',
      // 1:综合排序 2:销量排序，3：从低到高，4：从高到低
      filterType: '1'
      // priceForm: {
      //   from: '',
      //   to: ''
      // }
    }
  },
  computed: {

    activeIndex: {
      get() {
        return this.$store.getters.activeIndex
      }
      // set(val) {
      //   console.log('执行了')
      //   this.$store.commit('book/SET_ACTIVEINDEX', val.toString())
      // }
    },
    from: {
      get() {
        return this.$store.getters.searchBookForm.from
      },
      set(val) {
        this.$store.commit('book/SET_FROM', val)
      }
    },
    to: {
      get() {
        return this.$store.getters.searchBookForm.to
      },
      set(val) {
        this.$store.commit('book/SET_TO', val)
      }
    }
  },
  methods: {
    handleSelect(key, keyPath) {
      // key = 1是综合查询，2是销量查询，4是价格区间查询
      if (key === '3-1') {
        // this.$message('从低到高')
        this.priceTitle = '价格从低到高'
        this.filerType = 3
        this.$store.commit('book/SET_ACTIVEINDEX', '3')
        this.doFilter()
      }
      if (key === '3-2') {
        // this.$message('搞低')
        this.priceTitle = '价格从高到低'
        this.filerType = 4
        this.$store.commit('book/SET_ACTIVEINDEX', '3')
        this.doFilter()
      }

      if (key === '1') {
        this.priceTitle = '价格'
        this.filerType = 1
        this.$store.commit('book/SET_ACTIVEINDEX', '1')

        this.doFilter()
      }
      if (key === '2') {
        this.priceTitle = '价格'
        this.filerType = 2
        this.$store.commit('book/SET_ACTIVEINDEX', '2')

        this.doFilter()
      }
      if (key === '4') {
        this.priceTitle = '价格'
        this.filerType = 1
        this.$store.commit('book/SET_ACTIVEINDEX', '4')
      }
    },
    // 价格区间查询书籍
    handleBookPriceSection() {
      // initBookPageFormAndSearchBookForm()
      // 把其实页数设置成第一页
      this.setBookPageForm()
      this.doFilter()
    },
    setBookPageForm() {
      const bookPageForm = {
        total: 0,
        size: 18,
        current: 1,
        pages: 0
      }
      this.$store.commit('book/SET_BOOKPAGEFORM', bookPageForm)
    },
    doFilter() {
      this.setBookPageForm()
      const obj = {
        orderType: this.filerType,
        from: this.from,
        to: this.to
      }
      this.$store.commit('book/SET_ORDERTYPE_FROM_TO', obj)
      // 判断是ByCid，search，还是getList
      if (this.$store.getters.searchBookForm.getBooksByCid) {
        // 根据cid查询书籍
        // SET_ORDERTYPE_FROM_TO
        this.$store.dispatch('book/getBooksByCid')
      } else if (this.$store.getters.searchBookForm.str) {
        // 根据图书模糊查询
        this.$store.dispatch('book/searchBook')
      } else {
        // getList
        this.$store.dispatch('book/getList')
      }
    }

  }
}
</script>

<style lang="scss" scoped>
.price-div {
  width: 220px;
  .el-input {
    .el-input__inner {
      height: 30px !important;
    }
  }
  .line {
    text-align: center;
  }
}
</style>
